/*
 * @Author: zhouc 
 * @Date: 2024-04-19 09:56:21 
 * @Function: 我的记录
 * @Last Modified by:   zhouc 
 * @Last Modified time: 2024-04-19 09:56:21 
 */
<template>
  <div class="my-record-container">
    <TimePicker @timeChange="timeChange" />

    <div class="select-group">
      <div
        class="select-year"
        :style="{ color: rec.showYearPicker ? '#3E77FA' : '#616366' }"
        @click="() => handleSelectTime('year')"
      >
        2019-2020学年 ▼
      </div>
      <div
        class="select-month"
        :style="{ color: rec.showMonthPicker ? '#3E77FA' : '#616366' }"
        @click="() => handleSelectTime('month')"
      > 
        4月 ▼
      </div>
    </div>

    <van-list
      v-model:loading="rec.loading"
      :finished="rec.finished"
      :immediate-check="false"
      finished-text="暂无数据"
      loading-text="正在加载中......"
      @load="onLoad"
    >
      <div class="record-item" v-for="item in rec.list" :key="item">
        <div class="item-top">
          {{ item.classes }}
          <span class="time">{{
            dayjs(item.createTime).format("YYYY-MM-DD HH:mm")
          }}</span>
        </div>
        <div class="score-box">
          <span class="text">{{
            item.behaviorName || item.behaviorCategory
          }}</span>
          <span :class="`score ${item.behaviorScore > 0 ? 'green' : ''}`">
            {{
              item.behaviorScore > 0
                ? "+" + item.behaviorScore
                : item.behaviorScore
            }}</span
          >
        </div>
        <div class="result">{{ item.remark }}</div>
        <img
          v-if="item.status === 'CANCEL'"
          class="delete-img"
          :src="require('@/assets/img/delete.png')"
        />
      </div>
    </van-list>

    <Tabbar />
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import TimePicker from "@/components/time-picker/index.vue";
import Tabbar from "@/components/tabbar/index.vue";
import { getRecordByUseCode } from "@/service/modules/myRecord";
import dayjs from "dayjs";
import LocalCache from "@/utils/cache";

document.title = "我的记录";

const { name, personId } = LocalCache.getSession("userInfo");

const rec = reactive({
  list: [],
  selectTime: {},
  loading: false,
  finished: false,
});

let num = 1;

const onLoad = async () => {
  const { startTime, endTime } = rec.selectTime;

  rec.loading = true;
  rec.finished = false;

  const { code, rows, total } = await getRecordByUseCode({
    startTime,
    endTime,
    inspectorCode: personId,
    inspectorName: name,
    pageNum: num,
    pageSize: 20,
  });

  if (code === 0 && rows.length > 0) {
    rec.list = [...rec.list, ...rows];

    // 加载状态结束
    rec.loading = false;

    num++;

    if (total === rec.list.length) {
      rec.finished = true;
    }
  } else {
    rec.list = [];
    rec.finished = true;
  }
};

const timeChange = (selectTime) => {
  num = 1;

  rec.list = [];
  rec.selectTime = selectTime;

  onLoad();
};
</script>

<style lang="less" scoped>
.my-record-container {
  width: 100%;
  min-height: 100vh;
  padding: 48px 0 50px;
  background-color: #f7f7f7;

  .select-group {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    width: 100%;
    padding: 0 20px;
    background-color: #fff;
    font-size: 14px;
    position: fixed;
    left: 0;
    top: 0;

    .select-year,
    .select-month {
      width: 167.5px;
      text-align: center;
    }
  }

  .record-item {
    position: relative;
    background-color: #fff;
    margin: 16px 16px 0 16px;
    padding: 16px;
    height: 112px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .item-top {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      color: #303233;
      font-weight: 500;
      line-height: 19px;

      .time {
        font-size: 14px;
        color: #c2c6cc;
        line-height: 16px;
        margin-top: 1px;
      }
    }

    .score-box {
      margin: 8px 0 6px;
      display: flex;
      align-items: center;
      line-height: 16px;
      color: #616366;
      font-size: 14px;

      .text {
        display: inline-block;
        max-width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .score {
        color: #fa5646;
        font-weight: 500;
        padding: 4px 11.5px;
        background-color: rgba(250, 86, 70, 0.1);
        border-radius: 4px;
        margin-left: 6px;
      }

      .green {
        background: rgba(0, 194, 148, 0.1);
        color: #00c294;
      }
    }

    .result {
      font-size: 14px;
      line-height: 16px;
      color: #c2c6cc;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .delete-img {
      position: absolute;
      top: 29.12px;
      right: 16.74px;
      width: 50px;
      height: 50px;
    }
  }

  /deep/ .van-picker {
    height: 250px;
    position: fixed;
    width: 100%;
    top: 48px;
    left: 0;

    .van-picker-column__item {
      justify-content: start;
      padding-left: 16px;
    }
  }
}
</style>
